<template>
  <view class="category">
    <UgoSearch></UgoSearch>
    <view class="main">
      <view class="menus">
        <view
          :class="['menu-item', current === index ? 'active' : '']"
          v-for="(item, index) in menus"
          @click="handleMenuSelect(index)"
          :key="item"
          >{{ item }}</view
        >
      </view>
      <view class="content">
        <view class="goods-group" v-for="item1 in goods" :key="item1.cat_id">
          <view class="goods-group-title">{{ item1.cat_name }}</view>
          <view class="goods-group-content">
            <navigator v-for="item2 in item1.children" :key="item2.cat_id" :url="'/pages/goods_list/goods_list?cid='+item2.cat_id">
              <u-image
                width="120rpx"
                height="120rpx"
                :src="item2.cat_icon"
              ></u-image>
              <view class="cat-name">{{ item2.cat_name }}</view>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品分类数据
      // categories: [],
      menus: [],
      goods: [],
      // 左侧标题选中索引
      current: 0,
    };
  },
  onLoad() {
    // 异步！！  等待一段数据 数据才回来！！
    this.getCategories();
    this.categories = [];
  },
  // computed: {
  //   // 左侧标题数组 ["大家电"]
  //   menus() {
  //     return this.categories.map((item) => item.cat_name);
  //   },
  //   // 右侧商品数组
  //   goods() {
  //     if (!this.categories.length) return [];
  //     return this.categories[this.current].children;
  //   },
  // },
  methods: {
    // 发送请求获取分类数据
    async getCategories() {
      this.categories = await this.$u.http.get("/categories");
      this.menus = this.categories.map((item) => item.cat_name);
      this.goods = this.categories[this.current].children;
    },
    // 左侧标题的点击事件
    handleMenuSelect(current) {
      this.current = current;
      this.goods = this.categories[this.current].children;
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
    overflow: hidden;
    display: flex;
    .menus {
      width: 182rpx;
      overflow: auto;
      .menu-item {
        text-align: center;
        height: 74rpx;
        line-height: 74rpx;
        color: #666;
      }
      /* 选中的样式 */
      .active {
        color: $themeColor;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4rpx;
          height: 70%;
          background-color: $themeColor;
        }
      }
    }
    .content {
      flex: 1;
      overflow: auto;
      .goods-group {
        .goods-group-title {
          height: 74rpx;
          text-align: center;
          line-height: 74rpx;

          &::before,
          &::after {
            content: "/";
            margin: 0 10rpx;
            color: #ccc;
          }
        }

        .goods-group-content {
          display: flex;
          flex-wrap: wrap;
          navigator {
            width: 33.33%;

            display: flex;
            flex-direction: column;
            // 侧轴
            align-items: center;

            .cat-name {
              line-height: 1.2;
              padding-bottom: 20rpx;
            }
          }
        }
      }
    }
  }
}
</style>